<template>
	<view class="grace-padding">
		<view class="myface"><image :src="myFace" mode="widthFix"></image></view>
		<view class="grace-box-banner" style="margin:30rpx 0;">
			<view class="garce-items">
                <view class="line1">{{artCount}}</text></view>
                <view class="line2">文章</view>
            </view>
            <view class="garce-items">
                <view class="line1">{{user.u_integral}}</text></view>
                <view class="line2">积分</view>
            </view>
            <view class="garce-items">
                <view class="line1">{{user.u_remainder}}</text></view>
                <view class="line2">余额</view>
            </view>
            <view class="garce-items">
                <view class="line1">0</text></view>
                <view class="line2">消息</view>
            </view>
		</view>
		<view class="grace-title grace-nowrap grace-space-between" >
			<view class="grace-h5 grace-blod">我的文章</view>
		</view>
		<view class="myart-list" v-for="(item,index) in arts" :key="index">
			<view class="title">{{index}}   {{item.title}}</view>
			<view class="btns">
				<view :data-artid="item.art_id" @tap="editArt">编辑</view>
				<view :data-artid="item.art_id" :data-index="index" @tap="removeArt">删除</view>
			</view>
		</view>
		<view class="loadMore" @tap="getArtList">{{loadMore}}</view>
	</view>
</template>

<script>
	var _self, loginRes, page = 1;
	export default {
		data() {
			return {
				myFace : '',
				arts : [],
				loadMore : "点击加载更多",
				user : [],
				openId: '',
				artCount: ''
			}
		},
		methods: {
			getArtList: function() {
				if(this.loadMore != '点击加载更多'){return ;}
				this.loadMore != '加载中...';
				uni.request({
					url: this.apiServer + 'findArtcleByPage',
					method: 'GET',
					header: {'content-type' : "application/x-www-form-urlencoded"},
					data: {
						pageNum: page,
						pageSize: 3,
						openId: this.openId
					},
					success: (res) => {
						console.log(JSON.stringify(res));
						if(res.data.code == '200'){
						    this.arts = res.data.data.records;
							console.log( JSON.stringify(this.arts));
							this.artCount = res.data.data.total;
						    page++;
						    this.loadMore = '点击加载更多';
						}else if(res.data.code == '20'){
						    this.loadMore = '已经加载全部';
						}else{
						    this.loadMore = '点击加载更多';
						}
					}
				})
			}
		},
		onLoad:function(){
			_self = this;
			loginRes = this.checkLogin('../my/my', '2');
			if(!loginRes){return false;}
			this.myFace = loginRes[2];
			this.openId = loginRes[1];
		},
		onShow:function(){
			// 加载我的文章
			this.arts = [];
			page = 1;
			this.getArtList();
		}
	}
</script>

<style>
.myface{width:88px; height:88px; border:5px solid #F1F2F3; border-radius:100%; margin:15px auto;}
.myface image{width:100%; border-radius:100%;}
.myart-list{width:100%; margin:8px 0; overflow:hidden; border-bottom:1px dashed #D7D8D9;}
.myart-list .title{line-height:2em; width:100%;}
.myart-list .btns{line-height:2em; width:100%;}
.myart-list .btns view{float:right; padding:0 6px; margin:0 5px; color:#00B26A;}
.myart-list .btns view:last-child{color:#F76260;}
.loadMore{width:100%; padding:8px 0; text-align:center; color:#CCCCCC;}
</style>
